<template>
  <div  style="width: 100%">
    <Menu ref="thereismenu" :theme="theme2" class="left-menu" @on-select="navigatorTo" :active-name="activeName" width="150px" :open-names="openNames">
      <Submenu :name="item.menugroup" v-for="(item,key) in menus" :key="key">
        <template slot="title">
          <Icon :type="item.icon"></Icon>
          {{item.menugroup}}
        </template>
        <MenuItem v-for="(menu,index) in item.menuItems" :name="menu.path" :key="index">{{menu.text}}</MenuItem>
      </Submenu>
    </Menu>
  </div>

</template>
<script>
  export default {
    data () {
      return {
        theme2: 'light'
      }
    },
    methods: {
      navigatorTo:function(name){
        console.log('navigator to '+name);
        this.$router.push(name);
      },
      updateee:function(){
        console.log(this.activeName);

      }
    },
    props:['menus','activeName','openNames'],
    watch:{
      'activeName':function(newValue){
        console.log(this.$refs.thereismenu);
        this.$refs.thereismenu.updateActiveName();
        this.$refs.thereismenu.updateOpened();
        console.log('current:'+newValue);
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .left-menu{
    height: 100%;
    position: fixed;
    width: 100%;

  }
</style>
